<template>
  <view class="tab-item" 
        :class="{'tab-item--active':tabIndex == name}" 
        :id="`tab-item-${name}`"
        @click="handleClick">
    <view class="tab-item-label">{{ label }}</view>
  </view>
</template>

<script>
export default {
  name: 'Tabs',
  components: {},
  props: {
    label: String,
    value: [ String,Number ],
    name: [ String,Number ]
  },
  inject: [ 'tabs' ],
  data () {
    return {
      nodeInfo: {}
    }
  },
  computed: {
    tabIndex () {
      return this.tabs.curTab
    }
  },
  created () {
    console.log(this.tabs);
  },
  mounted () {},
  onReady () {
    this.getCpnNodeInfo()
  },
  methods: {
    handleClick () {
      this.tabs.setCurTab(this.name,this.nodeInfo)
    },
    getCpnNodeInfo () {
      return this.getNodeInfo(`tab-item-${this.name}`).then((res) => {
        this.nodeInfo = res
        if (this.$parent.$options.name == 'Tabs' ) {
          this.$parent.addTabItem({
            name: this.name,
            nodeInfo: res
          })
        }
        // this.$parent.
      })
    }
    
  }
}
</script>
<style lang="less" >
.tab-item{
  .flexLayout(@dir:column,@j:center,@a:center);
  padding: 22rpx 0 30rpx;
  flex: 1;
  border-radius: 10rpx;
  font-size: @font-size-base;
  &-label{}
  &-value{
    margin-top: 30rpx;
    font-size: @font-size-xxl;
    font-weight: bold;
  }
  &--active{
    color: @color-theme;
  }
}
</style>
